import React from "react";
import {
  Form,
  Input,
  DatePicker,
  Button,
  Select,
  Row,
  Col
} from 'antd';
class AddKill extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      killInfo: {
        people: "",
        price: "",
        startdate:"",
        enddate:"",
        repository:"",
        description:"",
        name: ""
      },
      shopName: "",
      list: null
    }
  }
  const
  formItemLayout = {
    labelCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 5,
      },
    },
    wrapperCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 16,
      },
    },
  };
  const
  tailFormItemLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 16,
        offset: 8,
      },
    },
  };
  handleMaxBackUp= (event)=>{
    if(event && event.target && event.target.value){
      let value = event.target.value;
      this.setState(()=>({shopName:value }))
    }
  }
  render() {
    return (
        <Form
            {...this.formItemLayout}
            onFinish={this.props.handleOk}
        >
          <Form.Item
              name="keyWord"
              label="商品关键字"
          >
            <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
              <Col className="gutter-row" span={17}> <Input onChange ={event => this.handleMaxBackUp(event)}/></Col>
              <Col className="gutter-row" span={5}><Button type="primary" onClick={this.props.shopKill.bind(this,{shopName:this.state.shopName})}>搜索</Button></Col>
            </Row>
          </Form.Item>
          <Form.Item
              name="name"
              label="商品名称"
              rules={[
                {
                  required: false,
                },
              ]}
          >
            <Select placeholder="请先输入商品搜索再进行选择" style={{ width: 300 }}>
              {(this.state.list || []).map(item => (
                  <Select.Option key={item.id} value={item.id}>
                    {item.name}
                  </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item label="活动日期" style={{ marginBottom: 0 }}>
            <Form.Item
                name="startdate"
                // validateStatus="error"
                // help="Please select the correct date"
                style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
            >
              <DatePicker />
            </Form.Item>
            <span
                style={{ display: 'inline-block', width: '24px', lineHeight: '32px', textAlign: 'center' }}
            >
            -
            </span>
            <Form.Item
                name="enddate"
                style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}>
              <DatePicker />
            </Form.Item>
          </Form.Item>
          <Form.Item
              name="people"
              label="团购人数"
              rules={[
                {
                  pattern: new RegExp(/^[1-9]\d*$/),
                  message: '团购人数必须为数字',
                },
                {
                  required: true,
                  message: '请输入团购人数',
                },
              ]}
              hasFeedback
          >
            <Input/>
          </Form.Item>
          <Form.Item
              name="price"
              label="秒杀价格"
              rules={[
                {
                  pattern: new RegExp(/^[1-9]\d*$/),
                  message: '秒杀价格必须为数字',
                },
                {
                  required: true,
                  message: '请输入秒杀价格',
                },
              ]}
              hasFeedback
          >
            <Input />
          </Form.Item>
          <Form.Item
              name="repository"
              label="秒杀库存"
              rules={[
                {
                  pattern: new RegExp(/^[1-9]\d*$/),
                  message: '秒杀库存必须为数字',
                },
                {
                  required: true,
                  message: '请输入秒杀库存',
                },
              ]}
              hasFeedback
          >
            <Input />
          </Form.Item>
          <Form.Item
              name="description"
              label="秒杀规则"
              rules={[
                {
                  required: true,
                  message: '请输入秒杀规则',
                },
              ]}
              hasFeedback
          >
            <Input.TextArea />
          </Form.Item>
          <Form.Item
              wrapperCol={{
                xs: { span: 24, offset: 0 },
                sm: { span: 16, offset: 5 },
              }}
          >
            <Button type="primary" htmlType="submit" style={{margin:'0 40px'}} >确认</Button>
            <Button type="primary" onClick={this.props.handleCancel} >取消</Button>
          </Form.Item>
        </Form>
    )
  }
}
export default AddKill